<template>
  <div class="form-control">
    <el-form :model="clazz" label-width="auto">

      <el-form-item label="开班时间">
        <el-date-picker v-model="clazz.start_time" type="date"
                        placeholder="请选择开班时间" style="width: 100%"
                        value-format="YYYY-MM-DD"
                        :default-value="currentTime"/>
      </el-form-item>

      <el-form-item label="班级名称">
        <el-input
            v-model.trim="clazz.name"
            type="text"
            placeholder="请输入班级名称"/>
      </el-form-item>

      <el-form-item label="课程时长">
        <el-input v-model.trim="clazz.duration" placeholder="请输入课程时长">
          <template #append>月</template>
        </el-input>
      </el-form-item>

      <el-form-item label="班主任">
        <el-input
            v-model.trim="clazz.mange_name"
            type="text"
            placeholder="请输入班主任名称"
        />
      </el-form-item>


    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      clazz: {
        id:null,//用户id
        start_time:null, //开班时间
        name: null,	//班级名称
        mange_name: null,//班主任
        duration: null,//课程时长
      }
    }
  },
  created() {
      window.$bus.on("update-clazz", this.saveClazz);
      // 根据 ID 查数据
      let id = this.$route.query.id
      // 在数据加载的时候,调用接口,完成数据的加载
      this.$api.get_update_Class(id).then(ret=>{
            //数据加载成功
          this.clazz.id=ret[0].id;
          this.clazz.start_time=ret[0].graduate_time;
          this.clazz.name=ret[0].name;
          this.clazz.mange_name=ret[0].mange_name;
          this.clazz.duration=ret[0].duration;
      })
  },
  methods: {
	  
	  
    saveClazz(index) {
		
		// console.log(index,"/////////////////////")
        // 保存班级信息
      if (this.clazz.name===""){
        this.$layer.msg("班级名不能为空")
        return;
      }

      if(this.clazz.duration ===""){
        this.$layer.msg("课程时长不能为空")
        return;
      }

      if(!/^\d+(\.\d+)?$/.test(this.clazz.duration)){
        this.$layer.msg("课程时间只能是个数字")
        return;
      }

      if(this.clazz.mange_name ===""){
        this.$layer.msg("班主任不能为空")
        return;
      }


      // 调用接口,完成班级的修改
      this.$api.SetUpdateClazz(this.clazz).then(ret=>{
        // 向 父页面 消息总线 发送 close-win 关闭窗口事件、通知父页面 关闭弹框
        // 父页面 监听 close-win , 并关闭该窗口 刷新
        parent.$bus.emit('close-win-refresh', index);
      })


    }
  },
  computed: {
    currentTime() {
      return new Date();
    }
  }
}
</script>

<style scoped>
.form-control {
  padding: 30px 30px 10px;
}
</style>